<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head th:replace="_fragments::head(Z博客)">
	 <meta charset="utf-8" /> 
	 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
	 <meta name="viewport" content="width=device-width, initial-scale=1"/> 
    <title>Z博客</title>

	<!--Bootstrap -->
     <link  href="../static/bootstrap/css/bootstrap.min.css"  th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"/> 
     <link  href="../static/css/index.css"  th:href="@{/css/index.css}" rel="stylesheet" /> 
	<style type="text/css">
 	.selfdivform{
    float: left;
    height: 30px;
    margin: 12px 12px;
    border: 0px;
   	padding:0px;
	} 
	.img-mini:hover{
				transform: scale(1.2);
			}

	</style>
  </head>
  
  <body>
	<div id="header">
	<!-- 导航条 -->
	<nav th:replace="_fragments::nav(1)" class="navbar navbar-default navbar-fixed-top " style="background-color: rgba(0,0,0,0.5);border: 0.5px;">
	 <div class="container">
	  <div class="navbar-header row" >
	    <!-- logo -->
	      <a class="navbar-brand" href="#"><font class="font-nav">ZkcBlog</font></a>

 		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-menu" >
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	        <span class="icon-bar" style="background: #fff"></span>
	    </button>
	  </div>
	  <!-- 自适应菜单栏 -->
	  <div class="navbar-right navbar-collapse collapse" id="nav-menu">
	  <ul class="nav navbar-nav" >
	  	<li><a href="index.html"><font class="font-nav">首页</font></a></li>
	   	<li><a href="archive.html"><font class="font-nav">文章归档</font></a></li>
	  	<li><a href="blogcate.html"><font class="font-nav">文章分类</font></a></li>
	   	<li><a href="aboutweb.html"><font class="font-nav">关于网站</font></a></li>
	  </ul>
	  <form class="navbar-form navbar-left" id="searchform">
        <div class="form-group">
          <input th:type="text" class="form-control" th:placeholder="Search"/>
        </div>
        <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
      </form>
      </div>
	 </div>
	</nav>
	<!--表头主体-->
		<div id="header-main"  th:style="' background-image: url('+'/image/bkth3.jpg'+'); background-size:cover; background-position: center;background-repeat: no-repeat;margin: 0 auto; '">
		</div>
	<!--表头底部-->
		<div id="header-footer" style=" height: 220px; background-color: rgba(230,244,244,0.8);
			margin-left: 15%;margin-right: 15%;
			position: relative;z-index: 1;top: -170px;
			border-top-left-radius: 8px;
    		border-top-right-radius: 8px;
   	 		border-bottom-right-radius: 8px;
    		border-bottom-left-radius: 8px;
    		padding-top: 70px;
    		">
			
			<a href="#main">
			<img th:src="@{/image/mini.jpg}" class="img-responsive img-circle img-mini" alt="Responsive image" width="110px;height:110px;" style="margin: auto;border: 2px dashed #fff; padding: 2px;
			cursor: pointer;
			transition: all 0.6s;
			" />
			</a>
			
		</div>

	</div>
	
	<!-- 中间主体 -->
	<div id="main" class="container">
		<div class="row">
			<!--文章主体-->
			<div class="col-md-8 panel panel-default" style="padding: 0px;">
				<div class="panel-heading">
					<h3 class="bolgtitle panel-title">
					博客
					</h3>
				</div>
				<div class="panel-body">
				<!-- 该input存储查询的关键字 -->
				<input id="searchkey" type="hidden" th:value="${searchkey}"/>
 					<div class="container-fluid">
					  	<div v-for="blog in blogs.list" class="row" style="height: 200px; padding:10px 15px;">
					  		<div class="col-md-8">
					  			<div class="content">
						  			<h3><a :href="'showblog.html?blogid='+blog.blogid">{{ blog.title }}</a></h3>
							  		<p class="content-p text-justify ">
							  		{{blog.content}}
							  		</p>
						  		</div>
						  		<div class="content-footer">
							  		<br/>
							  		<span class="glyphicon glyphicon-dashboard"></span>
							  		<span>{{blog.createtime}}</span>
							  		 
							  		<span class="glyphicon glyphicon-eye-open"></span>
							  		<span>  </span>
						  		</div>
					  		</div>
					  		<div class="col-md-4 bookimg" align="center" style="padding-top: 20px;height: 100%;"><!-- image/bolgtest.jpg -->
					  			<img v-if="blog.img!=null" class="img-responsive img-thumbnail" v-bind:src="blog.img" alt="..." />
					  		</div>
					  	</div>
					  	<hr/>
					  	
					</div> 
					<!-- 分页 -->
					 <nav aria-label="Page navigation">
					  <ul class="pagination">
					    <li>
					      <a id="up" class="btn" aria-label="Previous" v-on:click="bolgajax(blogs.pageNum-1,'')">
					        <span aria-hidden="true">上一页</span>
					      </a>
					    </li>
		 			    <li class="active"><a>{{blogs.pageNum}}</a></li>
					    <li>
					      <a id="down" class="btn"  aria-label="Next" v-on:click="bolgajax(blogs.pageNum+1,'')">
					        <span aria-hidden="true">下一页</span>
					      </a>
					    </li>
					    <li class="disabled">
					        <a class="btn">总页数：{{blogs.pages}}</a>
					    </li>
					  </ul>
					</nav>
					<!--分页结束-->
				</div>
			</div>
			<!--文章主体结束-->
			<!--侧边分配面板-->	
			<div id="sder-main" class="col-md-4">
				<!--分类列表-->
				<div class="panel panel-default" style="padding: 0px;">
					<div class="panel-heading">
					<th:lable class="pull-left panel-title">分类</th:lable>
					<th:lable class="pull-right"><a href="showblogcate.html">more</a></th:lable>
					<div class="clearfix"></div>
					</div>
					<div class="panel-body">
						<div class="list-group">
						  <!-- <a href="#" class="list-group-item ">
						    SpringBoot <span class="badge">14 </span>
						  </a> -->
						  <a :href="'showblogcate.html?cateid='+cate.cateid"
						  v-for="cate in blogcates" class="list-group-item">{{cate.catename}}</a>
						</div>
					</div>
				</div>
				<!--分类列表结束-->
				<!--标签列表-->

				<!--标签列表结束-->
			</div>
			<!--侧边分配面板结束-->	
		</div>
	</div>
	<!--中间结束-->

	<!-- 底部 -->
	<footer th:replace="_fragments::footer" class="panel-footer" style="background: #2a2730; color: #fff">
	  <div class="container">
	    <ul class="list-inline">
	      <li><a href="https://github.com/twbs/bootstrap">GitHub 仓库</a></li>
	      <li><a href="../getting-started/#examples">实例</a></li>
	      <li><a href="http://www.youzhan.org">优站精选</a></li>
	      <li><a href="../about/">关于</a></li>
	    </ul>

	    <p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>. Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>

	    <p>本项目源码受 <a rel="license" href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>开源协议保护，文档受 <a rel="license" href="https://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a> 开源协议保护。</p>
	  </div>
	</footer>
	
	<!-- 共用js -->
	<div th:replace="_fragments::js">
	<!--底部结束-->
		<!--     jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="jquery/jquery-2.1.1.min.js" th:src="@{/jquery/jquery-2.1.1.min.js}" ></script>
	<!--     加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}" ></script>
    <!-- 自定义js -->
    <script src="/js/bootstrap.min.js" th:src="@{/js/index.js}" ></script>
    </div>
</body>

<script>
/*<![CDATA[*/
/* $(function(){
    var content_arr = []; //定义一个空数组
    $(".content-p").each(function() { //遍历box内容
        var content = $.trim($(this).text()); //去掉前后文空格
        content_arr.push(content); //内容放进数组
    })
    for (var i=0;i<content_arr.length;i++){//遍历循环数组
        if (content_arr[i].length >= 80) { //如果数组长度（也就是文本长度）大于等于80（数字可自己定义）
            content = content_arr[i].substr(0, 80) + '...'; //添加省略号并放进box文字内容后面
            $(".content-p").eq(i).text(content);
        } else {
            content = content_arr[i];
            $(".content-p").eq(i).text(content);
        }
    }
}); */
/*]]>*/
 
//准备数据
var data = [{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"},
		{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"},
		{"title":"陈二狗的妖孽人生","content":"一个农村刁民的逆天人生。衣衫褴褛的老人蹲坐在破败房子前的白桦木墩子上，喝一口自制的烧酒，抽一口极烈的青蛤蟆旱烟，眯起眼睛，望着即将落入长白山脉的夕阳，朝身旁一个约莫六七岁、正陪着一黑一白两头土狗玩耍的小孩子说道：“浮生，最让东北虎忌惮的畜生，不是皮糙肉厚的黑瞎子，也不是600斤的野猪王，而是上了山的守山犬。”"}
]

 
//通过vue.js 把数据和对应的视图关联起来
var url = "http://localhost:8888/blog";
new Vue({
      el: '#main',
      data: {
        blogs: [],
      	//全部分类
        blogcates:[],
        //searchkey
        searchkey:''
      },
      created:function(){
    	  var seft=this;
    	  seft.searchkey=$("#searchkey").val();
    	  //查询全部blog
    	  seft.bolgajax(1,seft.searchkey);
    	  //查询全部分类
			$.ajax({
				url:"http://localhost:8888/blogcate",
				type:'get',
				data:{start:1,size:9999},
				//async: false,//同步
				success : function(data){
					if(data.result="success")
						seft.blogcates=data.data.list;
					else{
						alert("获取分类失败："+data.message)
						console.log("获取分类失败:"+data.message);
					}
					//console.log(seft.blogcates);
				},
				fail:function(){
					alert("获取分类请求失败")
				}
			});
      },
      methods:{//所有方法必须在method里创建
    	  bolgajax:function(startnum,key){
    		  var seft=this;
    		  $.ajax({
    				url:url,
    				type:'get',
    				data:{start:startnum,searchkey:key},
    				//async: false,//同步
    				success : function(data){
    					seft.blogs=data.data;
    					if(seft.blogs.pageNum>1){
    						$("#up").removeClass("disabled");
    					}else{
    						$("#up").addClass("disabled");
    					}
     					if(seft.blogs.pageNum>=seft.blogs.pages){
    						$("#down").addClass("disabled");
    					}else{
    						$("#down").removeClass("disabled");
    					} 
     					
    					//限制标题与文章在表格中显示大小
    					var i=0;
    					for(blog in seft.blogs.list){
    						if(seft.blogs.list[i].title.length>20){
    							seft.blogs.list[i].title=seft.blogs.list[i].title.slice(0,20)+'...';
    						}
    						if(seft.blogs.list[i].content.length>80){
    							seft.blogs.list[i].content=seft.blogs.list[i].content.slice(0,80)+'...';
    						}
    						i++;
    					}
     					
    				},
    				fail:function(){
    					console.log("请求错误:"+err);
    				}
    			});
    	  },
      }
    })
  
</script>
</html>